<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>

    <h1 id="counter"></h1>
    <!--  <script>
        const key = 'counter'
        let count = JSON.parse(localStorage.getItem(key)) || 0  //读取,从localStorage里取出来
        function render() {
            document.querySelector('#counter').innerText = count
        }
        document.documentElement.onclick = () => {
            count += 1  //发生改变，要保存到localStorage
            localStorage.setItem(key, JSON.stringify(count))
            render()

        }
        render()
    </script> -->

    <!-- <button id="add">+ 1MB 数据</button>
    <script>
        let i = 0
        document.querySelector('#add').addEventListener(
            'click', () => {
                const data = 'A'.repeat(1024 * 1024 - 4)
                localStorage.setItem(`key${i++}`, data)
            }
        )
    </script> -->

    <!-- <script>
        // sessionStorage
        const key = 'counter'
        let count = JSON.parse(sessionStorage.getItem(key)) || 0  //读取,从sessionStorage里取出来
        function render() {
            document.querySelector('#counter').innerText = count
        }
        document.documentElement.onclick = () => {
            count += 1  //发生改变，要保存到localStorage
            sessionStorage.setItem(key, JSON.stringify(count))
            render()

        }
        render()
    </script> -->
</body>

</html>